<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container {
    display: grid;
    /* 父级定义为 grid 容器 */
    grid-template-columns: repeat(3, 100px);
    /* grid-template-columns: 2fr 3fr 4fr; */
    /* 通过父级定义 3 列，每列宽度为 1fr（等分） */
    grid-template-rows: 25% 100px auto 60px;
    /* grid-template:25% 100px auto 60px / 2fr 3fr 4fr; */
    grid-template-areas: 
      '. b b'
      'a c d'
      'e e d'
    ;
    /* 通过父级定义 3 行，每行高度为 100px */
    gap: 10px;
    /* grid-column-gap: 10px; */
    /* grid-row-gap: 10px; */
    /* 设置网格项之间的间距 也可以使用 grid-column-gap 和 grid-row-gap 分别设置列和行的间距 */
  }

  .item {
    background-color: lightblue;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .item:nth-child(1) {
    /* grid-column: 1 / 3; */
    /* 跨越前两列  从列网格线 1开始 到 列网格线 3结束 */
    grid-area: a;
  }

  .item:nth-child(2) {
    /* grid-column: 3; */
    /* 仅占最后一列 网格线 3开始 */
    grid-area: b;
  }

  .item:nth-child(3) {
    /* grid-row: 3;
    grid-column: 1 / 3; */
    grid-area: c;
  }

  /* 跨越最后一行的前两列 */
  .item:nth-child(4) {
    /* grid-column: 3;
    grid-row: 2; */
    grid-area: d;
  }
  .item:nth-child(5) {
    /* grid-column: 3;
    grid-row: 2; */
    grid-area: e;
  }
  

  /* 仅占最后一列和最后一行 */
</style>
<body>
  <!-- 
  1. 什么是 CSS Grid
  CSS Grid Layout（网格布局）是一种二维布局系统，可以让你更方便地创建复杂的网页布局。与传统的布局系统相比，它在水平和垂直两个方向上同时进行布局，这使得它非常适合于现代网页设计。
  2. 基本概念
  Grid Container（网格容器）：设置为 display: grid; 的元素，它是网格布局的父元素。
  Grid Items（网格项）：网格容器中的直接子元素，这些元素会被排列成网格中的单元格。
  Grid Lines（网格线）：网格容器内的水平和垂直线，用于确定网格项的位置。
  Grid Tracks（网格轨道）：网格线之间的区域，通常是列和行。
  Grid Cells（网格单元格）：网格轨道交叉处的区域，用于放置网格项。
  Grid Areas（网格区域）：一个或多个网格单元格的组合区域。
  3. 基本知识 牢记行和列 了解网格线和单元格
  row 行
  column 列
-->
  <div class="big-box">
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

</body>

</html>
<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* styles.css */
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 2;
  grid-row: 1 ;
  background: #19CAAD;
}
.two { 
  grid-column: 2 / 5;
  grid-row: 1 / 3;
  background: #8CC7B5;
}
.three {
  grid-row: 4 / 5;
  grid-column: 1;
  background: #D1BA74;
}
.four {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
  background: #BEE7E9;
}
.five {
  grid-column: 2 / 5;
  grid-row: 3 / 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3 / 5;
  grid-row: 4 / 5;
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
  display: grid;
}
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="one item">One</div>
    <div class="two item">Two</div>
    <div class="three item">Three</div>
    <div class="four item">Four</div>
    <div class="five item">Five</div>
    <div class="six item">Six</div>
  </div>
</body>
</body>
</html> -->